<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频房间内</title>

    <link rel="stylesheet" href="../css/inRoom.css">
    <link rel="stylesheet" href="../css/inVideoRoom.css">
    <link rel="stylesheet" href="../css/personalPage.css">
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/google-fonts.css">

    <link rel="stylesheet" href="../node_modules/mdbootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/mdbootstrap/css/mdb.min.css">
    <link rel="stylesheet" href="../node_modules/mdbootstrap/css/style.css">

</head>
<body  style="background-color: #42464c">
<!-- 导入依赖-->
<script type="text/javascript" src="../node_modules/mdbootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/mdbootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="../node_modules/mdbootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../node_modules/mdbootstrap/js/mdb.min.js"></script>

<!--房间内-->
<div style="position: relative;">
    <!--  上方信息栏  -->
    <div class="bg-info clearfix" style="text-align: center;height: 100px;background-color: #26282c !important;">
        <!-- 退出按钮-->
        <button id="backBtn" class="btn btn-secondary" onclick="back()">挂断</button>
        <!--分享房间-->
        <button id="shareBtn" class="btn btn-secondary" onclick="Share()">分享</button>
        <button id="deleteRoomBtn" class="btn btn-secondary" onclick="deleteRoom()" style="visibility: hidden">删除房间
        </button>
        <!-- 标题-->
        <h4 class="bar" id="roomTitle" style="color: #ffffff">加载失败...</h4>
        <!-- 设置按钮 -->
        <button id="sittingBtn" class="btn btn-primary createRoom" onclick="sitting()">设置</button>
    </div>

    <!-- 设置框 -->
    <div id="sitting" class="card">
        <!-- 扬声器 -->
        <div class="sitting-range">
            <img class="icon" src="../img/speaker.png">
            <input type="range" min="0" max="100" id="speaker" onchange="setSpeaker()"/>
            <span style="margin: 10px; display: inline;" id="speakerValue">50</span>
        </div>
        <hr>
        <!-- 麦克风 -->
        <div class="sitting-range">
            <img class="icon" src="../img/microphone.png">
            <input type="range" min="0" max="100" id="microphone" onchange="setMicrophone()"/>
            <span style="margin: 10px;" id="microphoneValue">50</span>
        </div>
        <hr>
    </div>

</div>

<div class="friendList-messageBoard" id="friendList-messageBoard">
    <!--成员列表-->

    <div class="friendList1 card" style="height: 850px;">
        <h3 style="margin: 10px;">成员列表</h3>
        <hr>
        <h4 style="margin: 10px;">房主:</h4>
        <div class="friend1 card">
            <div>
                <!-- 头像 -->
                <div style="display: inline-block;">
                    <img class="friend-avatar" id="my-avatar"
                         src="">
                </div>
                <!-- 名字 -->
                <div style="display: inline-block;">
                    <h4 class="friend-name" id="my-name">加载失败...</h4>
                </div>
                <!-- 音频icon -->
                <div style="display: inline-block;align-items: center;">
                    <img id="earphone" class="icon" src="../img/earphone.png">
                </div>

            </div>
        </div>
        <hr>
        <h4 style="margin: 10px;">其他成员:</h4>
        <!-- 其他成员 -->
        <div class="memberList">

            <!--            &lt;!&ndash; 成员 &ndash;&gt;-->
            <!--            <div>-->
            <!--                <div class="friend1">-->
            <!--                    <div>-->
            <!--                        &lt;!&ndash; 头像 &ndash;&gt;-->
            <!--                        <div style="display: inline-block;">-->
            <!--                            <img class="friend-avatar" id="friend-avatar"-->
            <!--                                 src="https://tse4-mm.cn.bing.net/th/id/OIP-C.icmtPAEBY4b34eRiPY8SQgAAAA?w=187&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7">-->
            <!--                        </div>-->
            <!--                        &lt;!&ndash; 名字 &ndash;&gt;-->
            <!--                        <div style="display: inline-block;width: 120px;">-->
            <!--                            <h4 class="friend-name" id="friend-name">名字名字</h4>-->
            <!--                        </div>-->
            <!--                        &lt;!&ndash; 按钮 &ndash;&gt;-->
            <!--                        <div style="display: inline-block;margin: 10px; float: right">-->
            <!--                            &lt;!&ndash; 留言按钮 &ndash;&gt;-->
            <!--                            <button class="btn btn-primary btn1" style="height: 40px;"-->
            <!--                                    onclick="addFriend()">添加-->
            <!--                            </button>-->
            <!--                            &lt;!&ndash; 删除按钮 &ndash;&gt;-->
            <!--                            <button class="btn btn-secondary btn1" style="height: 40px; float: right;"-->
            <!--                                    onclick="kickOut()">-->
            <!--                                踢出-->
            <!--                            </button>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

        </div>
    </div>

    <!--视频窗口-->
    <div class="messageBoard1  videoBoard" id="videoContainer"
         style="overflow: auto;background-color: #f8f8f8;height: 850px;">

    </div>
</div>

<!--房间号：<input type="text" name="roomId" id="roomId"/>-->
<!--用户uid：<input type="text" name="uid" id="uid"/>-->
<!--用户姓名：<input type="text" name="userName" id="userName"/>-->
<!--<input type="button" onclick="startConn()" value="连接">-->
<!--<input type="button" onclick="joinRoom()" value="加入房间">-->
<!--<input type="button" onclick="hangUp()" value="挂断">-->

<!--放置视频框的地方-->
<!--    <div id="videoContainer" class="video-container" align="center">-->
<!--    </div>-->

<!--音频-->
<div id="audioContainer" class="audio-Container" align="center">
</div>

<script type="text/javascript">

    // 分享房间
    function Share() {
        //收集本网址
        var url = window.location.protocol + "//" + window.location.host + "/index/invite?roomId=" + roomId;
        //添加输入控件
        var input = document.createElement("input");
        input.type = "text";
        //把链接加入到输入控件中
        input.value = url;
        //把新加入的控件放在页面中
        document.body.appendChild(input);
        // 选中控件
        input.select();
        //调用执行复制
        document.execCommand("copy");
        //清除多余控件
        document.body.removeChild(input);
        alert("复制链接成功");

    }

    // 获取roomId和uid
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return (false);
    }

    // 设置两个重要的变量, 在inRoom.js里同样使用/
    let roomId = getQueryVariable("roomId");
    let uid = getQueryVariable("uid");

    //判断用户是否为房主
    let isRoomCreator = false;

    // 填入并禁用输入框
    $("#roomId").val(roomId).attr("disabled", "disabled");
    $("#uid").val(uid).attr("disabled", "disabled");

    // 默认隐藏设置框
    document.getElementById("sitting").style.display = "none";
    document.getElementById("earphone").style.display = "none";
    // 默认隐藏音频组件
    document.getElementById("audioContainer").style.display = "none";

    let flag = 1;

    // 设置
    function sitting() {
        if (flag % 2 === 1) {
            document.getElementById("sitting").style.display = "";
            flag++;
        } else {
            document.getElementById("sitting").style.display = "none";
            flag++;
        }
    }


    // 调节音量大小
    function setSpeaker() {
        let speaker = parseInt(document.getElementById("speaker").value);
        document.getElementById('speakerValue').innerHTML = speaker;
        document.getElementsByClassName("audio-play")[0].volume = speaker / 100;
        // console.debug("speakerVolume2:", speakerVolume)
    }

    // 调节麦克风输入大小
    function setMicrophone() {
        // TODO 设置麦克风大小
        let microphone = document.getElementById("microphone").value;
        document.getElementById('microphoneValue').innerHTML = microphone;
        document.getElementById("audioContainer").volume = microphone;
    }

    // 返回(挂断)
    function back() {
        // 挂断
        hangUp()

        // TODO 回到主页

    }

    // 添加好友
    function addFriend(id) {
        $.ajax({
            url: "/room/addFriend",
            type: "post",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: JSON.stringify({
                "uid": uid,
                "friendid": id,
            }),
            success: function (data) {
                if (data.er == "0") {
                    alert("添加好友失败");
                } else if (data.er == "1") {
                    alert("已经添加过此好友！")
                } else if (data.er == "3") {
                    alert("不能添加自己为好友！")
                } else {
                    alert("添加成功！")
                }
            }
        })
    }

    // 踢出房间
    function kickOut(kickUid) {
        console.log("我的uid:", uid, "-房间号：", roomId, "-踢走：", kickUid.toString());
        if (uid === kickUid.toString()) {
            alert("不能踢出自己!");
        } else if (isRoomCreator) {
            const str = JSON.stringify({
                type: "kickOut",
                roomId: roomId,
                kickUid: kickUid.toString(),
            });
            ws.send(str);
        } else {
            alert("你没有权限!");
        }
    }

    // 设置房主信息
    function setCreatorInfo(roomId) {
        console.debug("roomid:", roomId)
        $.ajax({
            url: "/room/getRoomCreaterInfo?roomId=" + roomId,
            type: "get",
            success: function (data) {
                let json = JSON.parse(data);
                console.log(json, typeof json);
                console.log("setUserInfo");

                $("#my-avatar").attr("src", json.creator.userimage);
                $("#my-name").text(json.creator.username);
                $("#roomTitle").text(json.room.roomname);

                // 只有房间创建者才能删除房间
                let creatorid = json.creator.uid;
                if (creatorid == uid) {
                    let t = document.getElementById('deleteRoomBtn').style.visibility = 'visible';
                    isRoomCreator = true;
                }
            }
        })
    }

    // 动态更新成员列表
    function setMemberList(uid) {

        $.ajax({
            url: "/room/getUserInfo?uid=" + uid,
            type: "get",
            success: function (data) {
                let json = JSON.parse(data);
                console.log(json, typeof json);

                // console.log("setMemberList2")
                // let memberList;
                let member = {
                    avatar: json.user.userimage,
                    name: json.user.username,
                    id: json.user.uid
                }
                $(".memberList").append(
                    '            <!-- 成员 -->\n' +
                    '            <div id="uid_' + member.id + '">\n' +
                    '                <div class="friend1">\n' +
                    '                    <div>\n' +
                    '                        <!-- 头像 -->\n' +
                    '                        <div style="display: inline-block;">\n' +
                    '                            <img class="friend-avatar" id="friend-avatar"\n' +
                    '                                 src="' + member.avatar + '">\n' +
                    '                        </div>\n' +
                    '                        <!-- 名字 -->\n' +
                    '                        <div style="display: inline-block; width: 120px;">\n' +
                    '                            <h4 class="friend-name" id="friend-name">' + member.name + '</h4>\n' +
                    '                        </div>\n' +
                    '                        <!-- 按钮 -->\n' +
                    '                        <div style="display: inline-block;margin: 10px; float: right;">\n' +
                    '                            <!-- 留言按钮 -->\n' +
                    '                            <button class="btn btn-primary btn1" style="height: 40px;"\n' +
                    '                                    onclick="addFriend(' + member.id + ')">添加\n' +
                    '                            </button>\n' +
                    '                            <!-- 删除按钮 -->\n' +
                    '                            <button class="btn btn-secondary btn1" style="height: 40px; float: right;"\n' +
                    '                                    onclick="kickOut(' + member.id + ')">\n' +
                    '                                踢出\n' +
                    '                            </button>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>'
                );
            }
        })
    }

    // 删除房间
    function deleteRoom() {
        if (confirm("确定要删除此房间吗？")) {
            $.ajax({
                url: "/room/deleteRoom?roomid=" + roomId,
                type: "get",
                success: function (data) {
                    let json = JSON.parse(data);
                    if (json.ans) {
                        alert("成功删除");
                        window.location.href = "/views/index.html";
                    }
                }
            })
        }
    }


</script>

<!--引入房间内主要的js通信-->
<script type="text/javascript" src="../js/inVideoRoom.js"></script>
</body>
</html>


